<template>
  <div>
    hello
    <!-- 3. 像使用html标签一样使用组件 -->
    <MyArticle v-for="item in articleList" :key="item.id" :title="item.title" :type="item.type"></MyArticle>
    <hr />
    <ComFather></ComFather>
    <NavButton v-for="item  in navList" :key="item.title" :icon="item.icon" :title="item.title"></NavButton>
    <NavList :navs="navs"></NavList>
    <TodoMvc></TodoMvc>
  </div>
</template>

<script>
// 1. 引入组件
import MyArticle from "./components/MyArticle.vue";
import ComFather from "./components/ComFather.vue";
import NavButton from './components/NavButton.vue'
import NavList from './components/NavList.vue'
import TodoMvc from './components/todo-mvc/TodoMvc.vue'
export default {
  // 2. 注册组件
  components: {
    MyArticle,
    ComFather,
    NavButton,
    NavList,
    TodoMvc
  },
  data() {
    return {
      articleList: [
        {
          id: 1,
          title: "jsxxxx",
          type: "前端",
        },
        {
          id: 2,
          title: "java xxxx",
          type: "后端",
        },
      ],
      navList: [
        {
          id: 1,
          icon: 'icon-home-fill',
          title: '百度'
        },
        {
          id: 2,
          icon: './assets/logo.png',
          title: '网易'
        },
        {
          id: 3,
          icon: 'icon-tool',
          title: '腾讯'
        },
      ],
      navs: ['安卓', '前端', '产品', '设计', '人工智能']
    };
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
</style>
